<template>

    <div>
      <p>
         
      <span>编号:</span>
      <el-input style="width: 150px;" v-model="fromdate.id"></el-input>
      <span>名字:</span>
      <el-input style="width: 150px;" v-model="fromdate.username"></el-input>
      <span>年龄:</span>
      <el-input style="width: 150px;" v-model="fromdate.age"></el-input>
       <el-button type="primary" @click="queryList()">查询</el-button>

        <el-button  type="primary" @click="downLoad()">导出excel</el-button>
      
    </p>
    <div>
         <el-table :cell-style="rowClass" :header-cell-style="rowClass" border :data="tableData" stripe style="width: 100%; ">
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="username" label="名字" width="180" />
    <el-table-column prop="sex" label="性别">
     <template  #default="scope">
          {{ scope.row.sex===1?'高级讲师':'首席讲师' }}
        </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄"/>
    <el-table-column label="操作">
    
  <el-button  size="mini">修改</el-button> <el-button size="mini">删除</el-button>
 
    </el-table-column>
  </el-table>
    </div>
      
    <div class="page">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[10, 30, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
                <el-button>确定</el-button>
            </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'queryList',
    data(){
        return{
            pageNum: 1,
            pageSize: 10,
            total: 0,
            tableData:[],
            fromdate:{
                id:'',
                username:'',
                age:''
            }
        }
    },
    mounted(){
        this.queryList()
    },
    methods: {
         //表格数据居中显示
        rowClass() {
                    return "text-align:center"
                },

        handleSizeChange(val) {
                this.pageSize = val;
                this.queryList();
            },
        handleCurrentChange(val) {
                this.pageNum = val;
                this.queryList();
            },

        downLoad(){
               window.location.href='/api/admin/outExcel?id=' +this.fromdate.id+"&username=" +this.fromdate.username+ "&age="+this.fromdate.age
        },
        queryList(){
            axios.get('/api/admin/qureylist?id=' +this.fromdate.id+"&username=" +this.fromdate.username+ "&age="+this.fromdate.age
            + "&pageNum="+this.pageNum + "&pageSize="+this.pageSize).then((res) => {
                console.log(res.data,"res.data")
                this.total = res.data.data.total
                this.tableData = res.data.data.adminList.list
            })
        }
    },
}
</script>
<style>
p {
  padding-left: 70px;
} 
  
</style>
